<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link href="framework/font-awesome/css/font-awesome.css" rel="stylesheet">
		<link href="framework/reset.css" rel="stylesheet">
		<link href="framework/icon.css" rel="stylesheet">
		<link href="css/index.css" rel="stylesheet">
		<script src="js/index.js"></script>
		<title>饿了么 首页</title>
	</head>
	<body>
		<!-- 总容器 -->
		<div class="wrapper">
			<!-- header部分 -->
			<header>
				<div class="icon-location-box">
					<div class="icon-location"></div>
				</div>
				<div class="location-text">沈阳市规划大厦<i class="fa fa-caret-down"></i></div>
			</header>
			<div class="search">
				<!--当滚动条超过上面的定位时，search-fixed-top块变成固定在顶部。-->
				<div class="search-fixed-top" id="fixedBox">
					<!-- 搜索框部分中间的白框 -->
					<div class="search-box">
						<i class="fa fa-search"></i>搜索饿了么商家、商品名称
					</div>
				</div>
			</div>
			
			<ul class="foodtype">
				<li onclick="location.href='businessList.html'">
					<img src="img/109063_big.png"/>
					<p>美食</p>
				</li>
				<li>
					<img src="img/109064_big.png"/>
					<p>早餐</p>
				</li>
				<li>
					<img src="img/109078.png"/>
					<p>跑腿代购</p>
				</li>
				<li>
					<img src="img/109080_big.png"/>
					<p>汉堡披萨</p>
				</li>
				<li>
					<img src="img/91497.png"/>
					<p>甜品饮品</p>
				</li>
				<li>
					<img src="img/91499.png"/>
					<p>速食简餐</p>
				</li>
				<li>
					<img src="img/91501.png"/>
					<p>地方小吃</p>
				</li>
				<li>
					<img src="img/91503.png"/>
					<p>米粉面馆</p>
				</li>
				<li>
					<img src="img/91505.png"/>
					<p>包子粥铺</p>
				</li>
				<li>
					<img src="img/97899.png"/>
					<p>炸鸡炸串</p>
				</li>
			</ul>
			<!-- 横幅广告部分（注意，此处背景有图片）-->
			<div class="banner">
				<h3>品质套餐</h3>
				<p>搭配齐全吃得好</p>
				<a>立即抢购 &gt;</a>
			</div>
			
			<div class="supermember">
				<div class="left">
					<img src="img/100377.png"/>
					<h3>超级会员</h3>
					<p>&#8226; 每月享超值权益</p>
				</div>
				<div class="right">
					立即开通 &gt;
				</div>
			</div>
			
			<div class="recommend">
				<div class="recommend-line"></div>
				<p>推荐商家</p>
				<div class="recommend-line"></div>
			</div>
			
			<div>
				<ul class="recommendtype">
					<li>综合排序<i class="fa fa-caret-down"></i></li>
					<li>距离最近</li>
					<li>销量最高</li>
					<li>筛选<i class="fa fa-filter"></i></li>
				</ul>
			</div>
			
			<ul class="business">
				<li>
					<img src="img/122248.png"/>
					<div class="business-info">
						<div class="business-info-h">
							<h3>万家饺子（软件园E18店）</h3>
							<div class="business-info-like">&#8226;</div>
						</div>
						<div class="business-info-star">
							<div class="business-info-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class="business-info-star-right">
								蜂鸟专送
							</div>
						</div>
						<div class="business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>
						<div class="business-info-explain">
							<div>各种饺子</div>
						</div>
						<div class="business-info-promotion">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">新</div>
								<p>饿了么新用户立减9元</p>
							</div>
							<div class="business-info-promotion-right">
								<p>2个活动</p>
								<i class="fa fa-caret-down"></i>
							</div>
						</div>
						<div class="business-info-promotion">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon" style="background-color: #f1884f;">特</div>
								<p>特价商品5元起</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<img src="img/122247.png"/>
					<div class="business-info">
						<div class="business-info-h">
							<h3>万家饺子（软件园E18店）</h3>
							<div class="business-info-like">&#8226;</div>
						</div>
						<div class="business-info-star">
							<div class="business-info-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class="business-info-star-right">
								蜂鸟专送
							</div>
						</div>
						<div class="business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>
						<div class="business-info-explain">
							<div>各种饺子</div>
						</div>
						<div class="business-info-promotion">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">新</div>
								<p>饿了么新用户立减9元</p>
							</div>
							<div class="business-info-promotion-right">
								<p>2个活动</p>
								<i class="fa fa-caret-down"></i>
							</div>
						</div>
						<div class="business-info-promotion">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon" style="background-color: #f1884f;">特</div>
								<p>特价商品5元起</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<img src="img/103709.png"/>
					<div class="business-info">
						<div class="business-info-h">
							<h3>万家饺子（软件园E18店）</h3>
							<div class="business-info-like">&#8226;</div>
						</div>
						<div class="business-info-star">
							<div class="business-info-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class="business-info-star-right">
								蜂鸟专送
							</div>
						</div>
						<div class="business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>
						<div class="business-info-explain">
							<div>各种饺子</div>
						</div>
						<div class="business-info-promotion">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">新</div>
								<p>饿了么新用户立减9元</p>
							</div>
							<div class="business-info-promotion-right">
								<p>2个活动</p>
								<i class="fa fa-caret-down"></i>
							</div>
						</div>
						<div class="business-info-promotion">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon" style="background-color: #f1884f;">特</div>
								<p>特价商品5元起</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<img src="img/109078.png"/>
					<div class="business-info">
						<div class="business-info-h">
							
							<h3>万家饺子（软件园E18店）</h3>
							<div class="business-info-like">&#8226;</div>
						</div>
						<div class="business-info-star">
							<div class="business-info-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class="business-info-star-right">
								蜂鸟专送
							</div>
						</div>
						<div class="business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>
						<div class="business-info-explain">
							<div>各种饺子</div>
						</div>
						<div class="business-info-promotion">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">新</div>
								<p>饿了么新用户立减9元</p>
							</div>
							<div class="business-info-promotion-right">
								<p>2个活动</p>
								<i class="fa fa-caret-down"></i>
							</div>
						</div>
						<div class="business-info-promotion">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon" style="background-color: #f1884f;">特</div>
								<p>特价商品5元起</p>
							</div>
						</div>
					</div>
				</li>
				<li>
					<img src="img/107966.png"/>
					<div class="business-info">
						<div class="business-info-h">
							<h3>万家饺子（软件园E18店）</h3>
							<div class="business-info-like">&#8226;</div>
						</div>
						<div class="business-info-star">
							<div class="business-info-star-left">
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<p>4.9 月售345单</p>
							</div>
							<div class="business-info-star-right">
								蜂鸟专送
							</div>
						</div>
						<div class="business-info-delivery">
							<p>&#165;15起送 | &#165;3配送</p>
							<p>3.22km | 30分钟</p>
						</div>
						<div class="business-info-explain">
							<div>各种饺子</div>
						</div>
						<div class="business-info-promotion">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon">新</div>
								<p>饿了么新用户立减9元</p>
							</div>
							<div class="business-info-promotion-right">
								<p>2个活动</p>
								<i class="fa fa-caret-down"></i>
							</div>
						</div>
						<div class="business-info-promotion">
							<div class="business-info-promotion-left">
								<div class="business-info-promotion-left-icon" style="background-color: #f1884f;">特</div>
								<p>特价商品5元起</p>
							</div>
						</div>
					</div>
				</li>
			</ul>
			<ul class="footer">
				<li>
					<i class="fa fa-home"></i>
					<p>首页</p>
				</li>
				<li>
					<i class="fa fa-compass"></i>
					<p>发现</p>
				</li>
				<li>
					<i class="fa fa-file-text-o"></i>
					<p>订单</p>
				</li>
				<li>
					<i class="fa fa-user-o"></i>
					<p>我的</p>
				</li>
			</ul>
		</div>
	</body>
</html>